<template>
  <div class="container">
    <div class="search-bar">
      <div class="search">
        <input type="text" focus="true" autofocus @click="focus" @blur="blur" v-model="search" placeholder="搜索商品名称搜索" />
        <div class="search-btn" @click="subSearch" v-if="searchFocus">搜索</div>
      </div>
    </div>
    <div class="search-content">
      <van-tabs :active="searchTabActive" @change="onChange">
        <van-tab title="店铺">
          <div class="panel">
            <div class="panel-head">
              <van-icon name="shop" size="14" />
              <span>商户分类</span>
            </div>
            <div class="panel-body">
              <!-- <div class="store-tags">
                <div class="store-tag">标签</div>
              </div> -->
            </div>
          </div>
          <!-- <div class="panel panel-cell">
            <div class="panel-head">
              <van-icon name="clock" size="14" />
              <span>历史记录</span>
            </div>
            <div class="panel-body">
              <van-cell-group>
                <van-cell title="单元格">
                  <van-icon slot="right-icon" name="close" class="van-cell__right-icon" />
                </van-cell>
                <van-cell title="单元格">
                  <van-icon slot="right-icon" name="close" class="van-cell__right-icon" />
                </van-cell>
              </van-cell-group>
            </div>
          </div> -->
        </van-tab>
        <van-tab title="商品">
          <div class="panel panel-cell">
            <div class="panel-head">
              <van-icon name="clock" size="14" />
              <span>历史记录</span>
            </div>
            <div class="panel-body">
              <!-- <van-cell-group>
                <van-cell title="单元格">
                  <van-icon slot="right-icon" name="close" class="van-cell__right-icon" />
                </van-cell>
                <van-cell title="单元格">
                  <van-icon slot="right-icon" name="close" class="van-cell__right-icon" />
                </van-cell>
              </van-cell-group> -->
            </div>
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
  import {
    mapState,
    mapMutations
  } from "Vuex";
  // 依赖
  import request from "@/api/request";
  export default {
    data() {
      return {
        searchTabActive: 0,
        searchFocus: false,
        search: ''
      }
    },
    methods: {
      focus() {
        this.searchFocus = true
      },
      blur() {
        if (!this.search) {
          this.searchFocus = false
        }
      },
      subSearch() {
        console.log(this.searchTabActive)
        switch (this.searchTabActive) {
          case 0:
            this.$router.push({
              path: '/pages/storeList/storeList',
              query: {
                keywords: this.search,
                type: 'search'
              }
            })
            break;
          case 1:
            this.$router.push({
              path: '/pages/productList/productList',
              query: {
                keywords: this.search,
                type: 'search'
              }
            })
            break;
        }

        console.log()
      },
      onChange(e) {
        console.log(e.mp.detail.index)
        this.searchTabActive = e.mp.detail.index
        // this.active = val
      },
    },
    mounted() {
      console.log("请求数据")
    },
  }

</script>

<style lang="less">
  .search-bar {
    z-index: 999;
  }

  .search-content {
    margin-top: 45px;
  }

  .panel {
    background: #fff;
    margin-bottom: 10px;

    .panel-head {
      font-size: 0;
      display: flex;
      align-items: center;
      padding: 15px;

      ._van-icon {
        margin-right: 5px;
        font-size: 14px;
        line-height: 1em;
        height: 14px;
      }

      span {
        font-size: 14px;
        color: #666666;
        line-height: 1em;
      }
    }

    .panel-body {
      padding: 0 15px 15px;


      .store-tags {
        .store-tag {
          margin-right: 15px;
          font-size: 12px;
          color: #222222;
          background: #f4f4f4;
          border: 0;
          height: 28px;
          line-height: 28px;
          border-radius: 14px;
        }
      }
    }
  }

  .panel-cell {
    .panel-body {
      padding: 0;
    }
  }

</style>
